<template>
<!-- 提现记录 -->
<div id="withdrawRecord">
	<header class="mui-bar mui-bar-nav header">
		<div class="mui-icon mui-icon-left-nav mui-pull-left" @tap="$router.go(-1)"></div>
		<h1 class="mui-title">{{routerTitle}}</h1>
		<div class="mui-icon mui-icon-help mui-icon-right-nav" @tap="showHelp"></div>
	</header>
	<div class="mui-content">
		<pullRefresh @refresh="toRefresh">
			<div class="order-list">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<div class="li-date">
							<span>提现方式</span>
							<span>提现金额</span>
							<span>当前余额</span>
							<span>用户操作</span>
						</div>
					</li>
					<li class="mui-table-view-cell" v-for="(item,index) in records">
						<div class="li-date">
							<span>{{item.way}}</span>
							<span>-{{item.money}}</span>
							<span>{{item.afterMoney}}</span>
							<button v-if="!item.cancel&&item.status==2" type="button" style="opacity: .5;" class="mui-btn mui-btn-warning">等待付款</button>
							<button v-if="!item.cancel&&item.status==3" type="button" class="mui-btn mui-btn-danger" @tap="sureTake(index)">确认收款</button>
							<button v-if="!item.cancel&&item.status==4" type="button" style="opacity: .5;" class="mui-btn mui-btn-success">完成提现</button>
							<button v-if="item.cancel" type="button" style="opacity: .5;" class="mui-btn mui-btn-royal">已被撤销</button>
						</div>
						<p>{{new Date(item.time).toLocaleString('chinese',{hour12:false})}} {{item.classify==1?'充值钱包':'盈利钱包'}} {{item.statueStr}}</p>
					</li>
				</ul>
			</div>
		</pullRefresh>
		<!-- 分页 -->
		<div v-if="pageNum>1" class="pageNav">
			<button :style="curPage==1?'opacity:.2':''" @tap="changePage(-1)" type="button" class="mui-btn mui-btn-primary">«上一页</button>
			<select v-model="curPage">
				<option v-for="i in pageNum" :value="i">{{i}}/{{pageNum}}</option>
			</select>
			<button :style="curPage==pageNum?'opacity:.2':''" @tap="changePage(1)" type="button" class="mui-btn mui-btn-primary">下一页»</button>
		</div>
	</div>
</div>
</template>

<script>
import pullRefresh from "@/components/pullRefresh"
import {withdrawRecord,okReceive} from "@/api/my"
export default{
	name:"withdrawRecord",
	components:{
		  pullRefresh
	},
	data(){
		return{
			curPage:1,
			pageNum:1,
			records:[],
		}
	},
	watch:{
		curPage(val){
			this.getWithdrawListByPage(val)
		}
	},
	mounted(){
		this.getWithdrawListByPage(1)
		this.showHelp()
	},
	methods:{
		getWithdrawListByPage(page,callback){
			mui.showLoading("等待中..", "div");
			withdrawRecord({page}).then(res=>{
				this.pageNum = res.pageNum
				this.records = res.records
				mui.hideLoading()
				callback && callback()
			})
		},
		changePage(e){
			if(e==-1){
				if(this.curPage==1){
					return;
				}else{
					this.curPage--
				}
			}else{
				if(this.curPage==this.pageNum){
					return;
				}else{
					this.curPage++
				}
			}
		},
		sureTake(index){
			mui.showLoading("等待中..", "div");
			let _id = this.records[index].id;
			okReceive(_id).then(res=>{
				mui.hideLoading()
				if(res==200){
					mui.toast("已确认收款")
				}
			})
		},
		showHelp(){
			mui.alert("请及时检查您是否已收到相应的提现款项，并尽快点击确认收款按钮！")
		},
		toRefresh(callback){
			 //这里进行重新加载数据操作
			 this.getWithdrawListByPage(1,()=>{
				callback()
			 })
		}
	}
}
</script>

<style scoped>
header.mui-bar {
    display: flex;
    justify-content: space-between;
}
.mui-icon.mui-icon-help{
	color: #fff!important;
}
</style>
